<template>
  <div class="home-page">
    <div class="top-box">
      <CardItem 
        v-for="item in classesInfo" 
        :key="item.id" 
        :classInfo="item"
        style="width: 300px; height: 120px; margin-bottom: 10px;" 
      />
    </div>
    <div class="center-box">
      <div class="left-box" ref="pieRef"></div>
      <div class="right-box" ref="barRef"></div>
    </div>
    <div class="bottom-box" ref="lineRef"></div>
  </div>
</template>

<script setup>
import { getClassInfo, getHeightInfo, getWeightInfo } from '@/api';
import CardItem from '@/components/CardItem.vue';
import * as echarts from 'echarts';
import { onMounted, onUnmounted, ref } from 'vue';

const classesInfo = ref([])

// 获取班级信息
getClassInfo().then(res => {
  console.log(res)
  classesInfo.value = res
})

// getGenderInfo().then(res => {
//   console.log(res)
// })

// 饼图
const pieRef = ref(null)
let pieChart = null
// 柱状图
const barRef = ref(null)
let barChart = null
// 折线图
const lineRef = ref(null)
let lineChart = null

onMounted(() => {
  
  pieChart = echarts.init(pieRef.value)
  pieChart.setOption(setPieChartOption())

  barChart = echarts.init(barRef.value)
  // barChart.setOption()
  getWeightInfoData()

  lineChart = echarts.init(lineRef.value)
  getHeightInfoData()

})

onUnmounted(() => {
  if (pieChart) pieChart.dispose()
  if (barChart) barChart.dispose()
  if (lineChart) lineChart.dispose()
})

const setPieChartOption = () => {
  const option = {
    title: {
      text: '人数统计'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {},
    series: [
      {
        name: '性别分布',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 28, name: '男生' },
          { value: 39, name: '女生' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  return option
}

const setBarChartOption = (weight, num) => {
  const option = {
    title: {
      text: '体重分布'
    },
    tooltip: {
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      data: weight
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true
      },
      // axisLabel: {
      //   formatter: function (value) {
      //     return value.toFixed(0)
      //   }
      // }
      minInterval: 1
    },
    series: [
      {
        data: num,
        type: 'bar'
      }
    ]
  }
  return option
}

const setLineChartOption = (height, num) => {
  const option = {
    title: {
      text: '身高分布'
    },
    tooltip: {
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      data: height
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true
      },
      // axisLabel: {
      //   formatter: function (value) {
      //     return value.toFixed(0)
      //   }
      // }
      minInterval: 1
    },
    series: [
      {
        data: num,
        type: 'line',
        smooth: true
      }
    ]
  }
  return option
}

const getWeightInfoData = () => {
  getWeightInfo().then(res => {
    console.log(res)
    const weight = res.labels
    const num = res.data
    barChart.setOption(setBarChartOption(weight, num))
  })
}

const getHeightInfoData = () => {
  getHeightInfo().then(res => {
    console.log(res)
    const height = res.labels
    const num = res.data
    lineChart.setOption(setLineChartOption(height, num))
  })
}

// 根据窗口的变化自动调整图表大小
window.onresize = function () {
  if (pieChart) pieChart.resize()
  if (barChart) barChart.resize()
  if (lineChart) lineChart.resize()
}


</script>

<style lang="scss" scoped>
.home-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .top-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
  }
  .center-box {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    .left-box {
      width: 400px;
      height: 100%;
      border-radius: 8px;
      border: 1px solid #ccc;
    }
    .right-box {
      margin-left: 20px;
      width: calc(100% - 420px);
      height: 100%;
      border-radius: 8px;
      border: 1px solid #ccc;
    }
  }
  .bottom-box {
    margin: 20px 0;
    width: 100%;
    height: 400px;
    border-radius: 8px;
    border: 1px solid #ccc
  }
}
</style>